<template>
  <div class="result-wrapper">
    <div class="song"  v-for="(item,index) in MusicList" :key="'Music' + index">
      <div class="name">
        <span class="iconfont icon-play" @click="goPlay(item)"></span>
        <a @click.prevent="gotoComment(item.id)"> {{ item.name}} </a>
        <span class="iconfont icon-editmedia" v-if="item.mvid !== 0" @click="gotoMv(item.mvid)"></span>
      </div>
      <div class="singer">{{ item.artists  | formateSinger}}</div>
      <div class="album">{{item.album.name}}</div>
      <div class="time">{{item.duration | formateTime}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      MusicList:[],
    } 
  },
  watch:{
    //监听地址是否发生变化，发起请求
    "$route.params.keyword":function(){
      this.getMusicList();
    }
  },
  async created(){
  //默认发去请求，获取歌曲列表
    this.getMusicList();
  },
  methods:{
    //发起请求获取歌曲列表
    async getMusicList(){
      // console.log(window.localStorage.getItem("keyword"));
      //d动态路由获取参数
      console.log(this.$route.params.keyword);
      if(this.$route.params.keyword===''){
        alert('输入您想要的歌曲名')
        return
      }
      //发起axios请求
      let res = await this.$axios.get('/search?keywords=' + this.$route.params.keyword)
      // console.log(res.data.result.songs);
      this.MusicList = res.data.result.songs
    },
    //点击跳转到播放音乐的路由，用编程式导航进行跳转
    goPlay(item){
      console.log(item);
      this.$router.push('/player/' + item.id)
    },

    //点击跳转到评
    gotoComment(id){
      console.log(id);
      this.$router.push('/comment/' + id)
    },
    gotoMv(mvid){
      console.log(mvid);
      this.$router.push('/video/' + mvid)
    }
    
  },
  filters:{
    //设置过滤器，过滤歌手名称
    formateSinger(singers) {
      let arts = "";
        singers.map(item => {
          arts += item.name + " ";
        })
        return arts;
      },
      // 歌曲处理时间
      formateTime(time) {
        //秒
        const totalSec = time / 1000;
        //分
        const min = ~~(totalSec / 60);
        //取整
        let sec = ~~(totalSec % 60);
        sec = sec < 10 ? '0' + sec : sec;
        return min + ":" + sec
      }
  }
};
</script>

<style scoped>
@import "@/assets/css/results.css";
</style>